.woi_modal_form_border{
    /* padding-top: 10px; */
}

.woi_modal_form_border_1{
    height: 0.5px;
    color: #bcbcbc;

}
.woi_74875884{
    overflow: hidden !important;
}
.woi_respon_01{
background: white !important;
}
.woi_modal_preview_w_01{
    background: transparent !important;
}
.woi_imag_close{
       
}

.desktop-hidden {
  display: block !important;
}

.mobile-block {
  display: none !important;

}

.woi_overflow_stop{
  overflow: hidden !important;
}


/* product.php */
@media only screen and (max-width: 768px) {

html .woi_modal_header_01{
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

.category-title{
  font-size: 13px !important;
}

#product-des, #service-des {
  font-size: 11px !important;
}






    /* carousel dot */
    .carousel_woi01-container_woi01 {
      position: relative;
      width: 100%;
      max-width: 600px;
      /* margin: 50px auto; */
      overflow: hidden;
    }

    .carousel_woi01 {
      display: flex;
      overflow-x: auto;
      scrollbar-width: none;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
    }

    .carousel_woi01::-webkit-scrollbar {
      display: none;
    }

    .card_woi01 {
      flex: 0 0 100%;
      scroll-snap-align: start;
      background-color: white;
      /* border-radius: 10px; */
      margin-right: 10px;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
  .card_woi01 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .dotswoi01 {
      text-align: center;
      margin-top: 0px;
    }

    .dot_woi01 {
      display: inline-block;
              width: 8px;
        height: 8px;
        margin: 0 1px;
      background-color: #ccc;
      border-radius: 50%;
      transition: background-color 0.3s;
      cursor: pointer;
    }

    .dot_woi01.active {
      background-color: #ff3f6c;
    }



    /* ------------------- */

       .carousel_woi02-container_woi02 {
      position: relative;
      width: 100%;
      max-width: 600px;
      /* margin: 50px auto; */
      overflow: hidden;
    }

    .carousel_woi02 {
      display: flex;
      overflow-x: auto;
      scrollbar-width: none;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
    }

    .carousel_woi02::-webkit-scrollbar {
      display: none;
    }

    .card_woi02 {
      flex: 0 0 100%;
      scroll-snap-align: start;
      background-color: white;
      /* border-radius: 10px; */
      margin-right: 4px;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
  .card_woi02 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .dotswoi01 {
      text-align: center;
      margin-top: 0px;
    }

    .dot_woi02 {
      display: inline-block;
              width: 6px;
        height: 6px;
        margin: 0 1px;
      background-color: #ccc;
      border-radius: 50%;
      transition: background-color 0.3s;
      cursor: pointer;
    }

    .dot_woi02.active {
      background-color: #ff3f6c;
    }

    .woi-modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #ffffff;
}

.woi-modal-content {
  max-width: 96%;
  max-height: 90%;
  border-radius: 0px;
}


.woi-modal {

        border-radius: 0px;
        animation: swipeUp 0.4s ease-out;
        height: 84vh;
        bottom: 0px;
        position: absolute;
  /* Bottom to top animation */

}
.modal-content{
   animation: swipeUp 0.4s ease-out;
}

/* Keyframes for bottom-to-top entrance */
@keyframes swipeUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes swipeDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

.woi-modal-close {
  position: absolute;
  top: 17px;
  right: 17px;
  color: #8d8d8d;
  font-size: 23px;
  font-weight: 400;
  cursor: pointer;
  transition: color 0.3s;
  border: 1px solid black;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
        justify-content: center;
        align-items: center
}

.woi-modal-close img{
  width: 20px;
  height: 20px;
}



.woi-modal-close:hover {
  color: #ff3f6c;
}

.hidden {
  display: none;
}

.woi-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  /* font-size: 36px; */
  cursor: pointer;
  /* padding: 10px 15px; */
  z-index: 10001;
  border-radius: 50%;
  user-select: none;
          background: white;
        width: 30px;
        height: 30px;
        border: 1px solid #f3f3f3;
}
.woi-modal-nav img{
  width: 20px;
  height: 20px;
}

.woi-modal-nav:hover {
         background: rgb(255 255 255 / 54%);
}

.woi-modal-nav.left {
  left: 10px;
}

.woi-modal-nav.right {
  right: 10px;
}


    /* carousel dot end */






     .desktop-hidden {
    display: none !important;
  }

  .mobile-block {
    display: block !important;
  }




.woi_mar_0px{
    margin: 0px !important;
    
}
.modal-open .modal {
    overflow-x: unset !important;
    overflow-y: unset !important;
}
.woi_imag_close {
   
}
.woi_mb_8843{
    margin-bottom: 12px !important;
            position: sticky;
        bottom: 5px;
                background: white;
        padding: 16px 0px;
}
.woi_mb_8843.not-sticky {
  position: static !important;
}

.woi_mob_fit{
    padding: 0px !important;
}
.woi_mob_fit_one{
    border: 1px solid #eeeeee !important;
            padding: 0px !important;
}
.woi_3884{
    padding-right: 0px !important;
    padding-left: 0px !important;
      /* padding: 15px !important; */
}
.item-details-holder{
padding-right: 15px !important;
padding-left: 15px !important;
padding: 0px 15px !important;
}
.img-display_woi{
    padding: 0px !important;
}
.woi_text_left{
    text-align: left;
        font-size: 13px !important;
        padding: 0px !important;
}
.woi_px_0022{
    padding: 0px 7px !important; 
}
.product-details {
    padding: 0px 7px !important;
    margin-bottom: 5px !important;
}
.woi_respon_01{
    
}

#products_enquiry_modal .modal-dialog, #service_enquiry_modal .modal-dialog
{
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translate(-50%, -40%);
    min-width: 400px;
    height: 100%;
    display: flex;
}
.modal .modal-dialog .modal-content{
  margin-bottom: 9vh !important;
}
}